<template>
  <div class="home" :class="{ bg: $route.meta.bg_on }">
    <div class="header">
      <div class="logo">
        <img
          class="logo_img"
          src="@/assets/images/Group6.png"
          alt=""
          v-show="!$route.meta.bg_on"
        />
        <img class="logo_img" src="@/assets/images/Group7.png" alt="" v-show="$route.meta.bg_on" />
      </div>
      <ul style="display: flex" :class="{'bg_avtiv':$route.meta.bg_on}">
        <li v-for="item in Nav" :key="item.title">
          <router-link :to="item.path" :class="{'activation':$route.meta.bg_on}">{{
            item.title
          }}</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bg_on: false,
      activation: "",
      bg_avtiv: "",
      logo_on: true,
      logo: "@/assets/Group6.png",
      Nav: [
        {
          path: "/home/main",
          title: "首页",
        },
        {
          path: "/home/situation",
          title: "态势大屏",
        },
        {
          path: "/home/monitoring",
          title: "监控中心",
        },
        {
          path: "/home/disposition",
          title: "处置中心",
        },
        {
          path: "/home/analyse",
          title: "分析中心",
        },
        {
          path: "/home/property",
          title: "资产中心",
        },
        {
          path: "/home/report",
          title: "报告中心",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.bg {
  background: url("@/assets/images/bg_center.png");
  background-position: 93px 108px;
  background-size: 100% 100%;
}
.header {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    color: #000;
    img {
      width: 100%;
      display: block;
    }
  }
  ul {
    padding: 40px 25px 30px;
    background-color: white;
    li {
      text-align: center;
      list-style: none;
      font-size: 14px;
      &:not(:nth-of-type(1)) {
        margin-left: 6px;
      }
      a {
        color: #8b95a5;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        display: block;
        width: 120px;
        height: 38px;
        line-height: 38px;
        text-decoration: none;
        transition: 500ms linear;
        &:hover {
          background-color: #239857;
          color: white;
        }
      }
      .activation {
        border: 1px solid #0a6ff5;
        color: #8b95a5;
      }
    }
  }
  .bg_avtiv {
    background-color: rgba(0, 0, 0, 0);
  }
}

.router-link-active{
  background-color: #239857;
  color: white !important;
} 

.router-link-exact-active{
  background-color: #239857;
  color: white !important;
}
</style>
